<template>
	<view>
		<u-navbar :is-back="false" background="transparent" title="消息" :title-size="45" title-color="#080808"></u-navbar>
		<view class="jf_box_wallet">
			<view class="jf_wallet_row" @click="opennewlist(1)">
				<view class="v1">
					<image src="../../static/icon/xxicon01.png" mode="widthFix"></image>
				</view>
				<view class="v2">
					<view class="v2_1">平台通知</view>
					<view class="v2_2">{{newsList1.title}}</view>
				</view>
				<view class="v3">
					<view>{{(newsList1.publishTime) | filter_time}}</view>
				</view>
			</view>
			<view class="jf_wallet_row"  @click="opennewlist(4)">
				<view class="v1">
					<image src="../../static/icon/xxicon02.png" mode="widthFix"></image>
				</view>
				<view class="v2">
					<view class="v2_1">客户动态</view>
					<view class="v2_2">我的客户新增{{newsList3}}条客户信息！</view>
				</view>
				<view class="v3">
					<view>一周内</view>
				</view>
			</view>
			<view class="jf_wallet_row" @click="opennewlist(3)">
				<view class="v1">
					<image src="../../static/icon/xxicon03.png" mode="widthFix"></image>
				</view>
				<view class="v2">
					<view class="v2_1">装修资讯</view>
					<view class="v2_2">{{newsList4.title}}</view>
				</view>
				<view class="v3">
					<view>{{(newsList4.publishTime) | filter_time}}</view>
				</view>
			</view>
			<view class="jf_wallet_row" @click="opennewlist(2)">
				<view class="v1">
					<image src="../../static/icon/xxicon04.png" mode="widthFix"></image>
				</view>
				<view class="v2">
					<view class="v2_1">系统消息</view>
					<view class="v2_2">{{newsList2.title}}</view>
				</view>
				<view class="v3">
					<view>{{(newsList2.publishTime) | filter_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'scene', 'openid'])
		},
		components: {},
		data() {
			return {
				newsList1: {},
				newsList2: {},
				newsList3: 0,
				newsList4: {},
				page: {
					pagenum: 1,
					pagesize: 1
				}
			}
		},
		onLoad(e) {
			if (this.userInfo.id == null) {
				return;
			} else {
				this.selectnewList('1');
				this.selectnewList('2');
				this.selectkh();
				this.selectnews();
			}
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setScene']),
			opennewlist:function(type){
				if(type ==4){
					uni.navigateTo({
					    url: '/pageB/component/customerlist'
					});
				}else{
					uni.navigateTo({
					    url: '/newpage/newsLIst?type='+JSON.stringify(type)
					});
				}
			},
			selectnewList: function(type) {
				// memberId: this.userInfo.id,
				uni.request({
					url: this.serverUrl + 'app/getMessageList',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						pageSize: this.page.pagesize,
						pageNum: this.page.pagenum,
						type: type
					},
					success: (r) => {
						if (r.data.code == 0) {
							if (type == "1") {
								this.newsList1 = r.data.data[0]
							} else if (type == "2") {
								this.newsList2 = r.data.data[0]
							} else {
								return
							}
						}
					}
				})
			},
			selectkh: function(){
				var myDate  = new Date();
				let start = this.timeshaixuan(myDate) 
				let end = this.timeshaixuan(myDate.getTime() - 3600 * 1000 * 24 * 7)
				console.log(start,end,'end')
				// 客户动态
				uni.request({
					url: this.serverUrl + 'app/getCustomerNews',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						memberId: this.userInfo.id,
						beginDate: end
					},
					success: (r) => {
						if (r.data.code == 0) {
							this.newsList3 = r.data.data
						}
					}
				})
			},
			selectnews: function(){
				// 装修资讯
				uni.request({
					url: this.serverUrl + 'app/getNewsList',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						pageSize: 1,
						pageNum: 1
					},
					success: (r) => {
						console.log(this.newsList4,'newsList4');
						if (r.data.code == 0) {
							this.newsList4 = r.data.data[0]
						}
					}
				})
			},
			timeshaixuan:function(newdate){
				let date = ''
				let year = new Date(newdate).getFullYear();
				let month = (new Date(newdate).getMonth()+1).toString().padStart(2,'0');;
				let day = (new Date(newdate).getDate()).toString().padStart(2,'0');;
				date = year+'-'+month+'-'+day;
				return date;
			}
		},
		filters: {
			filter_time(date) {
				if(date == undefined || date == null || date == ''){
					return ''
				}else{
					if (date != "" || date != null || date != undefined) {
						let timeStamp = date ? !isNaN(date) && (date + '').length > 4 ? new Date(parseInt(date)).getTime() : new Date(date)
							.getTime() : Date.now()
						let now = Date.now();
						let a = now - timeStamp;
						let m = 60 * 1000
						let h = m * 60
						let d = h * 24
						let z = d * 7
						let M = d * 30
						let y = d * 365
						let result = a <= m ? '刚刚' : a < m * 60 ? parseInt(a / m) + '分钟前' :
							a < h * 24 ? (parseInt(a / h) < 1 ? 1 : parseInt(a / h)) + '小时前' :
							a < d * 7 ? (parseInt(a / d) < 1 ? 1 : parseInt(a / d)) + '天前' :
							a < z * 4 ? (parseInt(a / z) < 1 ? 1 : parseInt(a / z)) + '周前' :
							a < M * 12 ? (parseInt(a / M) < 1 ? 1 : parseInt(a / M)) + '个月前' : (parseInt(a / y) < 1 ? 1 : parseInt(a / y)) +
							'年前'
						return result;
					} else {
						return ''
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.jf_box_wallet {
		padding: 30rpx;

		.jf_wallet_row {
			height: 160rpx;
			background-color: #ffffff;
			// box-shadow: 0px 0px 15rpx 0px 
			// 	rgba(44, 49, 140, 0.11);
			border-radius: 10rpx;
			display: flex;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			align-items: center;

			// margin-bottom: 25rpx;
			.v1 {
				width: 100rpx;
				height: 100rpx;
				margin-right: 30rpx;
			}

			.v2 {
				flex: 1;
				overflow: hidden;
				.v2_1 {
					font-size: 28rpx;
					color: #121212;
					margin-bottom: 10rpx;
				}

				.v2_2 {
					font-size: 20rpx;
					color: #bcbcbc;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.v3 {
				font-size: 22rpx;
				color: #bcbcbc;
				padding-right: 10rpx;
			}
		}
	}
</style>
